<template>
    <div>
        <div>
            <mt-header title="我的贷款记录">
                <router-link to="/profile" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
                <mt-button icon="more" slot="right"></mt-button>
            </mt-header>
        </div>
        <van-tabs v-model="active">
            <van-tab title="登录">
                <van-form :model="loginForm">
                    <van-field
                            v-model="loginForm.username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '用户名' }]"
                    />
                    <van-field
                            v-model="loginForm.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="display: flex">

                    <van-field
                            style="width: 200px"
                            v-model="loginForm.code"
                            type="text"
                            name="验证码"
                            label="验证码"
                            placeholder="验证码"
                            :rules="[{ required: true, message: '请填写验证码' }]"
                    />
                    <img :src="codeUrl" @click="getCaptchaImage" style="width: 100px; height: 30px;margin-top: 10px" />

                    </div>

                    <div style="margin: 16px;">
                        <van-button @click="loginSubmit" round block type="info" native-type="submit">
                            登录
                        </van-button>
                    </div>
                </van-form>
            </van-tab>
            <van-tab title="注册">
                <van-form :model="registryForm">
                    <van-field
                            v-model="registryForm.userName"
                            name="姓名"
                            label="姓名"
                            placeholder="姓名"
                            :rules="[{ required: true, message: '请填写姓名' }]"
                    />
                    <van-field
                            v-model="registryForm.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />


                    <van-field
                            v-show="isShowSms === false"
                            v-model="registryForm.phonenumber"
                            center
                            clearable
                            label="手机号码"
                            placeholder="请输入手机号码"
                    >
                        <template #button>
                            <van-button @click="toSendSms" size="small" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>

                    <van-field
                            v-show="isShowSms === true"
                            v-model="smsCode"
                            center
                            clearable
                            label="短信验证码"
                            placeholder="请输入短信验证码"
                    >
                        <template #button>
                            <van-button size="small" type="primary">重新获取验证码</van-button>
                        </template>
                    </van-field>

                    <div style="margin: 16px;">
                        <van-button @click="registrySubmit" round block type="info" native-type="submit">
                            注册
                        </van-button>
                    </div>
                </van-form>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import axios from 'axios'
    import Notify from "vant/lib/notify";
    export default {
        name: "Login",
        data() {
            return{
                currentCode: '',
                isShowSms: false,
                smsCode: '',
                active: 1,
                online: false,
                codeUrl: '',
                institutes: [],
                loginForm: {
                    username: '',
                    password: '',
                    code: '',
                    uuid: ''
                },
                registryForm: {
                    userName: '',
                    password: '',
                    phonenumber: '',
                },
                value: '',
                showPicker: false,
            }
        },
        mounted() {
            this.getCaptchaImage()
            if (window.sessionStorage.getItem('user')) {
                this.online = true
            }
        },
        methods: {
            toSendSms() {
                if (this.registryForm.phonenumber === '') {
                    Notify({ type: 'danger', message: '请输入手机号码' });
                    return
                }
                  var formData = new FormData();
                  formData.append('phone', this.registryForm.phonenumber)
                  axios.post('http://124.70.180.155:8080/aliyun/toSendRegistrySms', formData).then(res => {
                      console.log(res.data.sms)
                      this.currentCode = res.data.sms
                      this.isShowSms = true
                  })
            },
            getCaptchaImage() {
              axios.get('http://124.70.180.155:8080/captchaImage').then(res => {
                  console.log(res.data)
                  this.codeUrl = 'data:image/gif;base64,' + res.data.img
                  this.loginForm.uuid = res.data.uuid
              })
            },

            loginSubmit() {
                console.log(this.loginForm)
                axios.post('http://124.70.180.155:8080/login', this.loginForm).then(res => {
                    console.log(res.data.code)
                    if (res.data.code === 200) {
                        this.$router.push('/profile')
                        sessionStorage.setItem('token', res.data.token)
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            registrySubmit() {
                if (this.smsCode !== this.currentCode) {
                    Notify({ type: 'danger', message: '验证码不正确!' });
                    return
                }
                axios.post('http://124.70.180.155:8080/system/user/registry', this.registryForm).then(res => {
                    console.log(res)
                    if (res.data.code === 500) {
                        Notify({ type: 'danger', message: '用户已存在!' });
                        return
                    } else {
                        Notify({ type: 'success', message: '用户注册成功!' });
                        this.active = 0
                    }
                })
            }
        },

    }
</script>

<style scoped>

</style>
